<template>
    <div class="order-info-container">
        <div class="header-box acea-row row-middle van-hairline--bottom">
            <img :src="leftIcon" alt="order_info_head_icon" class="order-info-head-icon">
            <div>{{orderInfo.poPname}}</div>
        </div>
        <div class="acea-row row-middle">
            <div class="title-name">{{orderInfo.poSmActivityName}}</div>
            <Tag plain color="#0DCDB5" text-color="#0DCDB5" v-if="orderInfo.poAuditStatus === 1">已通过</Tag>
            <Tag plain color="#FF8D51" text-color="#FF8D51" v-else>未审核</Tag>
        </div>
        <div class="creat-time">{{orderInfo.poCreationDate | format}}</div>
        <div class="order-text">{{orderInfo.smActivityRemark}}
        </div>
        <div class="active-time">活动时间</div>
        <div class="time-box">
            <div class="acea-row row-middle time-box-item van-hairline--bottom">
                <img :src="sTimeIcon" alt="s-time" class="time-icon">
                <div class="time-text"> {{orderInfo.smActivityStartDate | format}} 开始</div>
            </div>
            <div class="acea-row row-middle time-box-item">
                <img :src="eTimeIcon" alt="e-time" class="time-icon">
                <div class="time-text"> {{orderInfo.smActivityEndDate | format}} 结束</div>
            </div>
        </div>
        <div class="shoot-site">拍摄点位</div>
        <div class="site-item van-hairline--bottom" v-for="(list,index) in fileList" :key="index">
            <div class="item-title">{{list.name}}</div>
            <Uploader v-model="list.url"
                      result-type="file"
                      multiple
                      :after-read="afterRead"
                      :disabled="true"
                      :deletable="true"></Uploader>
        </div>
        <div class="submit-bar acea-row row-middle row-between van-hairline--top">
            <div class="acea-row row-middle">
                <div class="price-text">金额</div>
                <div class="price">¥{{orderInfo.smActivityBonus}}</div>
            </div>
<!--            <Button color="#FF8D51" class="bottom-btn" size="large" v-if="orderInfo.poIsOver === 0" @click="onSubmitAudit(orderInfo.poId,userInfo.umId)">提交审核</Button>-->
<!--            <Button color="#F7F8FC" class="bottom-btn pass-btn" size="large " :disabled="true" v-else>已完成</Button>-->
        </div>
    </div>
</template>

<script>
    import {Tag, Uploader,Toast} from 'vant';
    import dayjs from "dayjs";
    import {getShootListInfo} from "../api/public";
    import axios from "axios";
    import {submitAudit} from "../api/user";
    import {mapGetters} from "vuex";

    const loadImg = name => require(`@/assets/images/${name}.png`)
    export default {
        name: "ShootOrderInfo",
        components: {
            Tag,
            Uploader
        },
        data() {
            return {
                leftIcon: loadImg('order_info_head-icon'),
                sTimeIcon: loadImg('order_start_time'),
                eTimeIcon: loadImg('order_end_time'),
                btnIcon: loadImg('Lightning'),
                fileList: [
                    {
                        name: '',
                        url: [
                            {url: ''}
                        ]
                    }
                ],
                orderInfo: {
                    siteList:[]
                },

                list:[],
            }
        },
        computed:{
            ...mapGetters(['userInfo'])
        },
        created() {
            this.init()
        },
        watch: {
            '$route': 'init'
        },
        filters: {
            format: function (value) {
                if (!value) return ''
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            init() {
                getShootListInfo(this.$route.query.orderId).then(res => {
                    this.orderInfo = res.data;
                    this.fileList = JSON.parse(res.data.poShootMessage);
                })
            },
            afterRead(file) {
                const data = new FormData()
                data.append('file', file.file)
                axios({
                    method: 'post',
                    url: 'http://182.150.54.249:9999/upload/img',
                    header: {
                        'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary8NQdQY1nve9bhqFl'
                    },
                    data: data
                }).then(res => {
                    file.url = res.data.data;
                    this.fileList = this.fileList.map(ele => {
                        return {url: ele.url}
                    })
                    if (!res.data.code) {
                        file.status = 'failed';
                        file.message = '上传失败';
                    }
                })
            },
            onSubmitAudit(poId,pumId){
                // if (this.fileList[0].url.length < 2) return Toast('请上传点位图片')
                const poShootMessage = JSON.stringify(this.fileList)
                submitAudit(poId,pumId,poShootMessage).then(res => {
                    Toast(res.msg)
                    if (res.code){
                        this.init()
                    }
                });
            }
        },
    }
</script>

<style scoped lang="scss">
    .order-info-container {
        padding: 0 20px;
        background-color: #fff;

        &::after {
            content: ' ';
            display: block;
            width: 100%;
            height: 80px;
        }

        .header-box {
            height: 80px;
            font-size: 16px;
            font-weight: 500;
            color: rgba(66, 69, 95, 1);
            margin-bottom: 30px;

            .order-info-head-icon {
                width: 30px;
                height: 30px;
                margin-right: 20px;
            }
        }

        .title-name {
            font-size: 18px;
            font-weight: 500;
            color: rgba(66, 69, 95, 1);
            margin-right: 15px;
        }

        .creat-time {
            font-size: 12px;
            font-weight: 400;
            color: rgba(163, 165, 177, 1);
            margin-top: 10px;
        }

        .order-text {
            font-size: 14px;
            font-weight: 400;
            color: rgba(66, 69, 95, 1);
            margin-top: 25px;
        }

        .active-time {
            font-size: 16px;
            font-weight: 500;
            color: rgba(66, 69, 95, 1);
            margin-top: 30px;
        }

        .time-box {
            width: 335px;
            height: 120px;
            background: rgba(247, 248, 252, 1);
            border-radius: 8px;
            padding: 0 20px;
            margin-top: 20px;

            .time-box-item {
                height: 50%;
            }

            .time-icon {
                width: 20px;
                height: 20px;
            }

            .time-text {
                font-size: 14px;
                font-weight: 500;
                color: rgba(66, 69, 95, 1);
                margin-left: 20px;
            }
        }

        .shoot-site {
            font-size: 16px;
            font-weight: 500;
            color: rgba(66, 69, 95, 1);
            margin-top: 30px;
        }

        .site-item {
            font-size: 14px;
            font-weight: 400;
            color: rgba(66, 69, 95, 1);
            padding: 20px 0;

            .item-title {
                margin-bottom: 15px;
            }
        }

        .submit-bar {
            height: 80px;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2;
            padding: 0 20px;
            background-color: #fff;

            .price-text {
                font-size: 16px;
                font-weight: 400;
                color: rgba(66, 69, 95, 1);
            }

            .price {
                font-size: 16px;
                font-weight: 500;
                color: rgba(255, 141, 81, 1);
                margin-left: 10px;
            }

            .bottom-btn {
                width: 120px;
                height: 40px;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 400;
            }

            .pass-btn {
                color: #A3A5B1!important;
            }
        }
    }
</style>
